// 弹出检测项目

<template>
    <van-popup
        v-model="visible"
        position="bottom"
        class="popup-bg"
        get-container="body"
        :style="{ height: '80%' }"
    >
        <div class="btn">
            <div @click="fnColse" class="cancle">取消</div>
            <div @click="fnSave" class="confirm">确定</div>
        </div>
        <div class="search-box">
            <!-- <f7-custom-searchbar
                :delay="2000"
                placeholder="请输入检测项目名称"
                search-container=".search-list"
                search-in=".item-text"
                @search="searchPart"
                v-model="keyWord"
            ></f7-custom-searchbar> -->
            <van-search
                v-model="keyWord"
                @search="searchPart"
                shape="round"
                background="#1990ff"
                placeholder="请输入检测项目名称"
            />
        </div>
        <div class="radio-list">
            <van-radio-group v-model="selectCode">
                <ul class="treeMenu">
                    <li v-for="(item, index) in data" :key="item[props.key]">
                        <div class="tree-item">
                            <div class="tree-item-left">
                                <i
                                    v-show="item.level != level"
                                    :class="[
                                        'triangle',
                                        carets[tapScopes[index]],
                                    ]"
                                    @click="changeStatus(index)"
                                />
                                <p
                                    :class="[
                                        'treeNode',
                                        { 'treeNode--select': item.onSelect },
                                    ]"
                                >
                                    <van-radio
                                        v-if="item.level == level"
                                        :name="item[props.key]"
                                        @click="checked(item)"
                                    />
                                    <span class="title"
                                        >{{ item[props.label]
                                        }}<span
                                            v-show="
                                                item[props.children].length > 0
                                            "
                                            >（{{
                                                item[props.children].length
                                            }}）</span
                                        ></span
                                    >
                                </p>
                            </div>
                        </div>
                        <v-popup-projectItem
                            v-show="scopes[index]"
                            :data="item[props.children]"
                            :defaultCode="defaultCode"
                            :level="level"
                            v-bind="$props"
                            @checked="checked"
                            v-on="$listeners"
                        ></v-popup-projectItem>
                    </li>
                </ul>
            </van-radio-group>
        </div>
    </van-popup>
</template>

<script>
const CARETS = { open: 'caret-down', close: 'caret-right' }
export default {
    name: 'v-popup-projectTree',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        level: {
            type: String,
            default: '',
        },
        data: { type: Array, default: () => [] },
        props: {
            type: Object,
            default: () => {
                return { children: 'childList', label: 'name', key: 'code' }
            },
        },
        defaultCode: {
            type: String,
            default: '',
        },
        // 操作后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        visible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    data() {
        return {
            keyWord: '',
            result: {},
            carets: CARETS,
            tapScopes: {},
            scopes: {},
            selectCode: '',
        }
    },
    created() {},
    methods: {
        // 关闭组件
        fnColse() {
            this.visible = false
        },
        // 提交
        fnSave() {
            this.autoClose && this.fnColse()
            this.$emit('save', this.result)
        },
        changeStatus(index) {
            // 图标变化
            this.$set(
                this.tapScopes,
                index,
                this.tapScopes[index]
                    ? this.tapScopes[index] === 'open'
                        ? 'close'
                        : 'open'
                    : 'open'
            )
            // 展开闭合
            this.$set(this.scopes, index, this.scopes[index] ? false : true)
        },
        searchPart() {
            this.$emit('search', this.keyWord)
        },
        async checked(item) {
            this.selectCode = item[this.props.key]
            this.result = _.cloneDeep(item)
        },
    },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.search-box {
    display: flex;
    align-items: center;
    background-color: #ebedf0;
    position: relative;
    height: 51px;

    @{deep}.searchbar {
        flex: 1;
        font-size: 16px;
        height: 35px;
        border-radius: 35px;
        overflow: hidden;
        margin-left: 16px;

        input[type='search'] {
            font-size: 16px;
            padding-left: 50px;
        }
    }

    > span {
        flex-shrink: 0;
        padding: 10px;
        width: 17px;
        height: 17px;
        background: url('../../../assets/img/search.png') no-repeat center /
            17px;
    }
}
@{deep} .van-radio {
    min-width: 20px;
    margin-right: 5px;
}
.popup-bg {
    width: 100%;
    .btn {
        display: flex;
        justify-content: space-between;
        height: 51px;
    }
    /deep/ .van-checkbox-group {
        height: calc(100% - 51px);
        overflow: auto;
    }
    .cancle {
        padding: 15px 0px 15px 18px;
        font-size: 14px;
        font-weight: 600;
    }
    .confirm {
        padding: 15px 18px 15px 0px;
        font-size: 14px;
        font-weight: 600;
    }
    .popup {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 400px;
        overflow: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: #fff;
    }
    .item {
        padding: 0 15px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #f7f8f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .selected {
        width: 16px;
        height: 16px;
        background-size: 16px auto;
    }
    .radio-list {
        height: calc(100% - 110px);
        overflow-y: auto;
    }
}

.treeMenu {
    padding-left: 20px;
    list-style: none;
    position: relative;
    user-select: none;
    color: #333;
}
.tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tree-item-left {
        flex: 1;
    }
    .tree-item-right {
        width: 124px;
    }
    .add {
        font-size: 14px;
        color: #3385ff;
    }
    .delete {
        font-size: 14px;
        color: #f15a5a;
        margin-left: 10px;
    }
    @{deep} .f7-icons {
        font-size: 13px;
        margin-right: 5px;
    }
}
.triangle {
    transition: all 0.1s;
    left: 6px;
    margin: 15px 0 0 0;
    position: absolute;
    cursor: pointer;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left: 8px solid grey;
}
.caret-down {
    transform: rotate(90deg);
    left: 2px;
    margin: 15px 0 0 0;
}
.checkbox-wrap {
    display: flex;
    align-items: center;
}
.checkbox {
    margin-right: 0.5rem;
}
.treeNode:hover,
.treeNode:hover > .operation {
    color: #3771e5;
    background: #f0f7ff;
}
.treeNode--select {
    background: #f0f7ff;
}
.treeNode:hover > .operation {
    opacity: 1;
}
p {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 0;
}
p > .title {
    cursor: pointer;
}
a {
    color: cornflowerblue;
}
.operation {
    position: absolute;
    right: 0;
    font-size: 18px;
    opacity: 0;
}
</style>
